---
title: Navigation
---

When you want to move between a page, you have a few options. Examples on this page will reference this routing structure:

<RouteTree
  routes={[
    { name: '_layout.tsx', description: 'Wraps all files in this directory and below' },
    { name: 'index.tsx', description: 'Matches "/"' },
    { name: 'blog.tsx', children: [
      { name: 'index.tsx', description: 'Matches "/blog"' },
      { name: '[slug].tsx', description: 'Matches a single sub-path of "/blog", like "/blog/hello"' }
    ] },
  ]}
/>

## Link

You can use the Link component as follows:

```tsx fileName=app/index.tsx
import { Link } from 'one'

export default function HomePage() {
  return (
    <>
      <Link href="/blog">
        Go to the blog
      </Link>

      <Link href="/blog/introducing-one">
        Go to the Introducing One article
      </Link>
    </>
  )
}
```

Link accepts the following props, where `Href` is your typed file system routes (or a string if you turn off typed file system routing) and `TextProps` is the [React Native Text element props](https://reactnative.dev/docs/text#props):

```tsx
export interface LinkProps extends TextProps {
  /** Path to route to. */
  href: Href

  /** Forward props to child component. Useful for custom buttons. */
  asChild?: boolean

  /** Should replace the current route without adding to the history. */
  replace?: boolean

  /** Should push the current route  */
  push?: boolean

  /** On web, this sets the HTML `class` directly. On native, can be used with CSS interop tools. */
  className?: string

  onPress?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent) => void

  /**
    * **Web only:** Specifies where to open the `href`, passed to the underlying anchor (`<a>`) tag.
    *   See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
    */
  target?: '_self' | '_blank' | '_parent' | '_top' | (string & object)

  /**
    * **Web only:** Specifies the relationship between the `href` and the current route.
    *   See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
    */
  rel?: string

  /**
    * **Web only:** Specifies that the `href` should be downloaded when the user clicks on the link.
    */
  download?: string
}
```

## useLinkTo

This hook will generate both an `href` string and an `onPress` function, see [the useLinkTo docs](/docs/hooks-useLinkTo) for how to use it.

## useRouter

This hook returns a static object used for routing. It will never update, and is only used for imperatively controlling the router. Useful for programmatically controlling the routing, and choosing between a `push` or `replace`.

See [the useRouter documentation page](/docs/hooks-useRouter) for more.
